<!DOCTYPE html>
<html lang="en">
<head>
    <title>N1-Elecciones-Javascript</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

    <script src="js/Urn.js" type="text/javascript"></script>

    <!-- Support to Fira Code Font -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css">
</head>
<body>

<header>

</header>

<nav>

</nav>

<main>
    <section id="banner">
        <img src="images/Encabezado.jpg" alt="Banner">
    </section>

    <section id="section-candidate">
        <fieldset id="div-first-candidate">
            <legend>Candidate Frank</legend>

            <img src="images/Francis.jpg" alt="Obama" width="160" height="200" class="center">

            <p>Name: Frank</p>
            <p>Last Name: Underwood</p>
            <p>Age: 26</p>
            <p>Political Party:</p>
            <p>Independiente</p>
            <p>Cost Campaign: 0</p>
            <p id="counter-votes-frank">N° of Votes: 0</p>

            <button type="button" class="button-blue">Percentage Votes</button> <br><br>
            <button type="button" class="button-blue" onclick="vote('Frank')">Vote</button>

        </fieldset>

        <fieldset id="div-second-candidate">
            <legend>Candidate Claire</legend>

            <img src="images/Claire.jpg" alt="Obama" width="160" height="200" class="center">

            <p>Name: Claire</p>
            <p>Last Name: Underwood</p>
            <p>Age: 37</p>
            <p>Political Party:</p>
            <p>Revolucionario</p>
            <p>Cost Campaign: 0</p>
            <p id="counter-votes-claire">N° of Votes: 0</p>

            <button type="button" class="button-blue">Percentage Votes</button> <br><br>
            <button type="button" class="button-blue" onclick="vote('Claire')">Vote</button>

        </fieldset>

        <fieldset id="div-third-candidate">
            <legend>Candidate Obama</legend>

            <img src="images/Obama.jpg" alt="Obama" width="160" height="200" class="center">

            <p>Name: Barack</p>
            <p>Last Name: Obama</p>
            <p>Age: 35</p>
            <p>Political Party:</p>
            <p>Alternativo</p>
            <p>Cost Campaign: 0</p>
            <p id="counter-votes-obama">N° of Votes: 0</p>

            <button type="button" class="button-blue">Percentage Votes</button> <br><br>
            <button type="button" class="button-blue" onclick="vote('Obama')">Vote</button>

        </fieldset>
    </section>

    <section id="section-totals">
        <fieldset>
            <legend>Totales</legend>

            <p>Total Votos: </p>
            <p>Costo Promedio Campaña: </p>
        </fieldset>
    </section>

    <section id="section-options">
        <fieldset>
            <legend>Opciones</legend>

            <!-- Initially, the urn is empty, it does not have sense to have the button at this moment -->
            <button type="button" class="button-red" id="clear-urn" onclick="clearUrn()" disabled>Vaciar Urna</button>
            <button type="button" class="button-blue" id="option-1">Opción 1</button>
            <button type="button" class="button-blue" id="option-2">Opción 2</button>

        </fieldset>
    </section>
</main>

<footer>
</footer>

</body>
</html>